<template>
  <div>
    <!-- 数据表单部分 -->
    <div class="carbonAccount-form">
      <div class="carbonAccount-form-title">数据概览</div>
      <normal-form-plus
        :formModel="formModel"
        :config="config"
        :plus="plus"/>
    </div>

    <!-- 数据展示 -->
    <div class="carbonAccount-data">
      <!-- 数据展示左侧 -->
      <div class="carbonAccount-data-part">
        <!-- 左侧上方数据展示 -->
        <div class="carbonAccount-data-part-left">
          <div class="carbonAccount-data-part-left-cube">
            <div class="carbonAccount-data-part-left-cube-1">碳排放总量（tCO2e）</div>
            <div class="carbonAccount-data-part-left-cube-2">57.837</div>
            <div class="carbonAccount-data-part-left-cube-3"></div>
            <div class="carbonAccount-data-part-left-cube-4">相较相较2022年第1季度：12.65%</div>
          </div>
          <div class="carbonAccount-data-part-left-cube">
            <div class="carbonAccount-data-part-left-cube-1">减排量 （tCO2e）</div>
            <div class="carbonAccount-data-part-left-cube-2">7.837</div>
            <div class="carbonAccount-data-part-left-cube-3"></div>
            <div class="carbonAccount-data-part-left-cube-4">相较相较2022年第1季度： 12.65%</div>
          </div>
        </div>
        <!-- 左侧下方图表展示 -->
        <div class="carbonAccount-data-part-left-chart">
          <div class="carbonAccount-data-part-left-chart-title">排放类别分析</div>
          <pie/>
        </div>
      </div>

      <!-- 数据展示右侧 -->
      <div class="carbonAccount-data-part">
        <div class="carbonAccount-data-part-right-chart">
          <div class="carbonAccount-data-part-right-chart-title">温室气体产生路径图</div>
          <sankey/>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import NormalFormPlus from '@/components/NormalFormPlus'
import Sankey from '@/components/Chart/Sankey'
import Pie from '@/components/Chart/Pie'

export default {
  name: 'Handle',
  components: {
    NormalFormPlus,
    Sankey,
    Pie
  },
  data() {
    return {
      formModel: {
        selection1: '',
        selection2: '',
        selection3: '',
      },
      config: [
        {
          id: 1,
          items: [
            {
              id: '1',
              edit: true,
              type: 'select',
              span: 6,
              model: 'modelLevel',
              name: '',
              props: {
                placeholder: "核算名称",
                options: [
                  {value: '1', label: '1'},
                  {value: '2', label: '2'}
                ]
              }
            },
            {
              id: '2',
              edit: true,
              type: 'select',
              span: 6,
              model: 'modelLevel',
              name: '',
              props: {
                placeholder: "核算标准",
                options: [
                  {value: '1', label: '1'},
                  {value: '2', label: '2'}
                ]
              }
            },
            {
              id: '3',
              edit: true,
              type: 'select',
              span: 6,
              model: 'modelLevel',
              name: '',
              props: {
                placeholder: "核算周期",
                options: [
                  {value: '1', label: '1'},
                  {value: '2', label: '2'}
                ]
              }
            }

          ]
        },
      ],
      plus: {}
    }
  }
}
</script>

<style lang="scss" scoped>
// 表单相关样式
.carbonAccount-form {
  width: 100%;
  height: 100px;
  padding: 10px;

}

.carbonAccount-form-title {
  margin-bottom: 15px;
}

// 数据展示相关样式
.carbonAccount-data {
  padding: 5px;
  width: 100%;
  height: 550px;
  margin-top: 5px;
  //
  display: flex;
}

.carbonAccount-data-part {
  flex: 1;
}

// 左侧样式
.carbonAccount-data-part-left {
  //
  display: flex;
  height: 130px;
  padding: 5px 0;
}

.carbonAccount-data-part-left-cube {
  flex: 1;
  font-size: 16px;

  text-align: center;
  padding: 0 20px;
  overflow: hidden;
  margin: 0 10px;
}

.carbonAccount-data-part-left-cube-1 {
  margin-top: 10px;
}

.carbonAccount-data-part-left-cube-2 {
  margin-top: 10px;
  font-size: 24px;
  margin-bottom: 10px;
}

.carbonAccount-data-part-left-cube-3 {
  height: 1px;
  border: #f1f3f4 solid 1px;
  width: 100%;
}

.carbonAccount-data-part-left-cube-4 {
  text-align: left;
  margin-top: 10px;
  font-size: 14px;
}

.carbonAccount-data-part-left-chart {

  margin-top: 10px;
  height: 400px;
  padding: 10px;

}

// 左侧-下侧
.carbonAccount-data-part-left-chart-title {
  font-size: 16px;
}

// 右侧样式
.carbonAccount-data-part-right-chart {

  height: 100%;
  margin-left: 10px;
  padding: 10px;
}

.carbonAccount-data-part-right-chart-title {
  font-size: 16px;
}
</style>
